<template>
	<view>
		<view class="add-wrapper">
			<button class="add-button" @click="openParkingRentDrawer('ADD')">发布信息</button>
		</view>
		<view class="parkingRent-item" v-for="(item, index) in parkingRents"
			@click="openParkingRentDrawer(isSelf?'EDIT':'DETAIL', item)">
			<view class="parkingRent">
				<view class="parkingRent-info">
					<view class="parkingRent-detail">
						<span class="parkingRent-detail-name text-overflow">
							{{ item.parkingArea + '-' + item.parkingNum }}
						</span>
						<span class="parkingRent-detail-price">
							{{ item.parkingPrice }}元/月
						</span>
					</view>
					<span class="parkingRent-info-content text-overflow">{{ item.parkingDes }}</span>
				</view>
				<view class="parkingRent-stat text-overflow">
					<view>
						{{ formatDate(item.createTime) }}
					</view>
					<label class="parkingRent-stat-payRange">
						{{item.payRange}}
					</label>
					<view class="parkingRent-stat-status"
						:style="'color:'+(item.parkingStatus==='URGENT'?'red':'green')+';'">
						{{item.parkingStatus==='FREE'?'空闲':item.parkingStatus==='URGENT'?'急租':'自用'}}
					</view>
				</view>
			</view>
		</view>
		<uni-drawer class="infoDrawer-form" ref="addInfoDrawer" mode="right" :width="320" :mask-click="true">
			<uni-card :is-shadow="true" is-full>
				<text v-if="formDrawerDisable" class="drawer-tips">本平台只提供消息发布分享功能，并不保证该信息正确性，涉及金钱交易请仔细核实。</text>
				<text v-if="!formDrawerDisable" class="drawer-tips">本平台目前仅供邻居使用，请勿发布虚假信息，一经发现，封号处理。</text>
			</uni-card>
			<view class="infoDrawer-item">
				<label>车位:</label>
				<picker class="parkingAreaPicker" @change="parkingAreaChange" :disabled="formDrawerDisable"
					:range="parkingAreas">
					<view>{{parkingRentDetail.parkingArea}}</view>
				</picker>
				<label>区</label>
				<input class="infoDrawer-item-price" :disabled="formDrawerDisable"
					v-model="parkingRentDetail.parkingNum" placeholder="车位号" />
			</view>
			<view class="infoDrawer-item">
				<label>状态:</label>
				<picker class="singelPicker" @change="parkingStatusChange" range-key="value"
					:disabled="formDrawerDisable" :range="parkingStatusList">
					<view>
						{{ getParkingStatusValue }}
					</view>
				</picker>
			</view>
			<view class="infoDrawer-item">
				<label>价格:</label>
				<input class="infoDrawer-item-price" :disabled="formDrawerDisable" type="number"
					v-model="parkingRentDetail.parkingPrice" placeholder="价格" />
				<label>元/月</label>
			</view>
			<view class="infoDrawer-item">
				<label>付款:</label>
				<picker class="singelPicker" @change="payRangeChange" :disabled="formDrawerDisable"
					:range="payRangeLists">
					<view>{{parkingRentDetail.payRange}}</view>
				</picker>
			</view>
			<view class="infoDrawer-item">
				<label>描述:</label><textarea :disabled="formDrawerDisable" v-model="parkingRentDetail.parkingDes" />
			</view>
			<view class="infoDrawer-item">
				<label>联系方式:</label>
				<textarea :disabled="formDrawerDisable" style="height: 100rpx;"
					v-model="parkingRentDetail.contactInfo" />
			</view>
			<button v-if="formDrawerDisable" style="background-color: #02b920;" @click="chartOnline">站内交流</button>
			<button v-if="!formDrawerDisable" style="background-color: #71abe8;" @click="confirmForm">提交</button>
			<button v-if="!formDrawerDisable" style="background-color: #ff4548;"
				@click="closeParkingRentDrawer">取消</button>
		</uni-drawer>
	</view>
</template>

<script>
	import {
		parkingRentList,
		addParkingRent,
		updateParkingRent,
		getContact
	} from "../../../common/api/middleServer/parkingRentApi";
	import {
		formatSimpleDate
	} from '../../../common/utils/commonUtils'
	export default {
		data() {
			return {
				drawerStatus: 'ADD',
				isSelf: false,
				parkingStatusList: [{
						key: 'FREE',
						value: '空闲',
					},
					{
						key: 'URGENT',
						value: '急租',
					},
					{
						key: 'SELF_USE',
						value: '自用',
					},
				],
				parkingAreas: ['A', 'B', 'C', 'D', 'E', 'F'],
				payRangeLists: ['押一付三', '半年付', '年付', '面议', ],
				parkingRents: [{
					id: '',
					parkingArea: '',
					parkingNum: '',
					adjacentBuild: '',
					parkingPrice: '',
					parkingDes: '',
					payRange: '',
					parkingStatus: '',
					concactInfo: '',
					createTime: '1999-01-01 00:00:00',
				}],
				parkingRentDetail: {
					id: '',
					parkingArea: '',
					parkingNum: '',
					adjacentBuild: '',
					parkingPrice: '',
					parkingDes: '',
					payRange: '',
					parkingStatus: '',
					concactInfo: '',
				},
				rentContactMobile: '',
				getContactDis: false,
				pageInfo: {
					total: 0,
					size: 20,
					current: 1,
					totalPage: 0,
					queryParams: {
						createUserid: ''
					}
				}
			};
		},
		onLoad(type) {
			if (type.type && type.type === 'self') {
				this.pageInfo.queryParams.createUserid = this.$store.getters.userId
				this.isSelf = true
			}
			console.log(1190, this.pageInfo)
			this.getFirsttParkingRents(this.pageInfo)
		},
		onPullDownRefresh() {
			this.getFirsttParkingRents()
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			this.getNextParkingRents()
		},
		computed: {
			formDrawerDisable: function() {
				return this.drawerStatus === 'DETAIL';
			},
			getParkingStatusValue: function() {
				for (var i = 0; i < this.parkingStatusList.length; i++) {
					if (this.parkingStatusList[i].key === this.parkingRentDetail.parkingStatus) {
						return this.parkingStatusList[i].value
					}
				}
				return ''
			}
		},
		methods: {
			formatDate(date) {
				return formatSimpleDate(date)
			},
			getFirsttParkingRents(pageInfo) {
				parkingRentList(pageInfo).then(res => {
					console.log(res)
					this.parkingRents = res.records
					this.pageInfo.total = res.total
					this.pageInfo.current = res.current
					this.pageInfo.size = res.size
					this.pageInfo.totalPage = Math.ceil(res.total / res.size)
					console.log(this.parkingRents)
				})
			},
			getNextParkingRents() {
				if ((this.pageInfo.current + 1) <= this.pageInfo.totalPage) {
					this.pageInfo.current += 1
					parkingRentList().then(res => {
						console.log(res)
						this.parkingRents = this.parkingRents.concat(res.records)
						this.pageInfo.total = res.total
						this.pageInfo.current = res.current
						this.pageInfo.size = res.size
						this.pageInfo.totalPage = Math.ceil(res.total / res.size)
					})
				}
			},
			openParkingRentDrawer(drawerStatus, item) {
				if (item) {
					this.parkingRentDetail = item
				} else {
					this.parkingRentDetail = {
						id: '',
						parkingArea: '',
						parkingNum: '',
						adjacentBuild: '',
						parkingPrice: '',
						parkingDes: '',
						payRange: '',
						parkingStatus: '',
						concactInfo: '',
					}
				}
				this.rentContactMobile = ''
				this.getContactDis = false
				this.$refs.addInfoDrawer.open();
				this.drawerStatus = drawerStatus
			},
			closeParkingRentDrawer() {
				console.log(this.parkingRentDetail)
				this.$refs.addInfoDrawer.close()
			},
			confirmForm() {
				if (this.drawerStatus === 'ADD') {
					addParkingRent(this.parkingRentDetail).then(res => {
						this.$refs.addInfoDrawer.close()
						this.getFirsttParkingRents()
					})
				} else {
					updateParkingRent(this.parkingRentDetail).then(res => {
						this.$refs.addInfoDrawer.close()
						this.getFirsttParkingRents()
					})
				}
			},
			getPusherContact() {
				getContact({
					parkingRentId: this.parkingRentDetail.id
				}).then(res => {
					if (!res) {
						uni.showToast({
							icon: "error",
							title: '该用户未留手机号。'
						})
						this.getContactDis = true
						console.log(this.getContactDis)
					} else {
						this.rentContactMobile = res
					}
				})
			},
			chartOnline() {
				// 发起新的会话
				this.$store.dispatch('addNewChart', this.parkingRentDetail.createUserid)
			},
			parkingStatusChange(val) {
				this.parkingRentDetail.parkingStatus = this.parkingStatusList[val.target.value].key
			},
			parkingAreaChange(val) {
				this.parkingRentDetail.parkingArea = this.parkingAreas[val.target.value]
			},
			payRangeChange(val) {
				this.parkingRentDetail.payRange = this.payRangeLists[val.target.value]
			}
		}
	}
</script>

<style lang="scss">
	$chart_both_width: 120rpx;

	.parkingRent-item {
		display: flex;
		flex-direction: row;
		height: 150rpx;
	}

	.parkingRent {
		width: 100%;
		display: flex;
		flex-direction: row;
		border-bottom: 1rpx solid #e5e5e5;
	}

	.parkingRent-info {
		width: 70%;
		display: flex;
		flex-direction: column;
		margin-left: 20rpx;
	}

	.parkingRent-stat {
		width: 30%;
		font-size: small;
		color: #9f9f9f;
		display: flex;
		margin-top: 20rpx;
		flex-direction: column;
		text-align: right;
		margin-right: 20rpx;
	}

	.parkingRent-stat-payRange {
		margin-top: 10rpx;
	}

	.parkingRent-stat-status {
		margin-top: 10rpx;
	}

	.parkingRent-detail {
		display: flex;
		flex-direction: row;
		width: 100%;
		height: 100%;
		margin-top: 20rpx;
	}

	.parkingRent-detail-name {
		width: 40%;
	}

	.parkingRent-detail-price {
		color: #659d8d;
	}

	.parkingRent-info-content {
		height: 50%;
		font-size: small;
		color: #9f9f9f;
	}

	.parkingAreaPicker {
		width: 20%;
		height: 80rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		border-bottom: 1px solid #a2a2a2;
		;
		margin-bottom: 20rpx;
	}
</style>
